<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">系统基础配置</div>
      <div class="ele-page-desc"> 用于系统基础展示等场景。 </div>
    </div>
    <div class="ele-body"
         style="padding-bottom: 71px">
      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="130px"
               @keyup.enter.native="submit"
               @submit.native.prevent>
        <el-card shadow="never"
                 header="基础配置"
                 body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15">
            <el-col :lg="8"
                    :md="10">
              <el-form-item label="浏览器图标:"
                            prop="browserIcon">
                <span slot="label">
                  浏览器图标
                  <el-tooltip placement="top">
                    <div slot="content">
                      用于打开网站时浏览器标签页图标展示<br />
                      大小尺寸为100px * 100px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>

                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button"
                       @click="modalPicTap('dan', 'browserLogo', '浏览器图标')">
                    <div>
                      <div tabindex="0"
                           class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item"
                             style="margin: 0 0 0 0"
                             v-if="form.browserLogo">
                          <div class="el-image">
                            <img :src="form.browserLogo"
                                 width="100%"
                                 height="100%"
                                 class="el-image__inner"
                                 style="object-fit: cover" />
                          </div>
                          <div class="ele-image-upload-close"
                               @click="handleRemove('browserLogo')"><i class="el-icon-close"></i></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="8"
                    :md="10">
              <el-form-item label="系统图标:"
                            prop="systemIcon">
                <span slot="label">
                  系统图标
                  <el-tooltip placement="top">
                    <div slot="content">
                      系统左侧LOGO展示<br />
                      大小尺寸为100px * 100px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!-- <ele-image-upload v-model="form.systemIcon" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" /> -->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button"
                       @click="modalPicTap('dan', 'sysLogo', '系统图标')">
                    <div>
                      <div tabindex="0"
                           class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item"
                             style="margin: 0 0 0 0"
                             v-if="form.sysLogo">
                          <div class="el-image">
                            <img :src="form.sysLogo"
                                 width="100%"
                                 height="100%"
                                 class="el-image__inner"
                                 style="object-fit: cover" />
                          </div>
                          <div class="ele-image-upload-close"
                               @click="handleRemove('sysLogo')"><i class="el-icon-close"></i></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="8"
                    :md="10">
              <el-form-item label="系统名字:"
                            label-width="130px"
                            prop="sysName">
                <el-input v-model.trim="form.sysName"
                          placeholder="请输入该系统名字"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="备案号:"
                            label-width="130px"
                            prop="recordNumber">
                <el-input v-model.trim="form.recordNumber"
                          placeholder="请输入备案号"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="京公网备案号:"
                            label-width="130px"
                            prop="publicNetworkRecordNumber">
                <el-input v-model.trim="form.publicNetworkRecordNumber"
                          placeholder="请输入京公网备案号"
                          clearable></el-input>
              </el-form-item>
              <el-form-item label="版权信息:"
                            label-width="130px"
                            prop="copyrightInfo">
                <el-input v-model.trim="form.copyrightInfo"
                          placeholder="请输入版权信息"
                          clearable />
              </el-form-item>
              <el-form-item label="appid:"
                            label-width="130px"
                            prop="appid">
                <el-input v-model.trim="form.appid"
                          placeholder="请输入系统名称"
                          clearable></el-input>
                <span style="color: #c0c4cc">appid用于站点授权</span>
              </el-form-item>
              <el-form-item label="微信号:"
                            label-width="130px"
                            prop="appid">
                <el-input v-model.trim="form.wechat"
                          placeholder="请输入微信号"
                          clearable></el-input>
              </el-form-item>
              <!-- <el-form-item label="域名:"
                            label-width="130px"
                            prop="appid">
                <el-input :disabled="true"
                          v-model.trim="form.realmName"
                          placeholder="请填写域名"
                          clearable></el-input>
              </el-form-item> -->
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never"
                 header="LOGO配置"
                 body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15">
            <el-col :lg="8"
                    :md="10">
              <el-form-item label="背景图:"
                            prop="loginBackground">
                <span slot="label">
                  外部背景图
                  <el-tooltip placement="top">
                    <div slot="content">
                      用于登录时的背景图片选择<br />
                      大小尺寸跟分辨率同比例
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!--<ele-image-upload  v-model="form.loginBackground" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" />-->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button"
                       @click="
                      modalPicTap('dan', 'loginBackgroundImg', '登录背景图')
                    ">
                    <div>
                      <div tabindex="0"
                           class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item"
                             style="margin: 0 0 0 0"
                             v-if="form.loginBackgroundImg">
                          <div class="el-image">
                            <img :src="form.loginBackgroundImg"
                                 width="100%"
                                 height="100%"
                                 class="el-image__inner"
                                 style="object-fit: cover" />
                          </div>
                          <div class="ele-image-upload-close"
                               @click="handleRemove('loginBackgroundImg')"><i class="el-icon-close"></i></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :lg="8"
                    :md="10">
              <el-form-item label="登录左侧图标:"
                            prop="loginLeftIcon">
                <span slot="label">
                  登录左侧图标
                  <el-tooltip placement="top">
                    <div slot="content">
                      登录页左侧展示<br />
                      大小尺寸为510px * 420px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!-- <ele-image-upload v-model="form.systemIcon" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" /> -->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button"
                       @click="modalPicTap('dan', 'loginLeftLogo', '登录左侧图标')">
                    <div>
                      <div tabindex="0"
                           class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item"
                             style="margin: 0 0 0 0"
                             v-if="form.loginLeftLogo">
                          <div class="el-image">
                            <img :src="form.loginLeftLogo"
                                 width="100%"
                                 height="100%"
                                 class="el-image__inner"
                                 style="object-fit: cover" />
                          </div>
                          <div class="ele-image-upload-close"
                               @click="handleRemove('loginLeftLogo')"><i class="el-icon-close"></i></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :lg="8"
                    :md="10">
              <el-form-item label="登录内部背景图:"
                            prop="loginBackgroundImgTwo">
                <span slot="label">
                  登录框背景图
                  <el-tooltip placement="top">
                    <div slot="content">
                      登录内部背景图<br />
                      大小尺寸为934px * 462px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!-- <ele-image-upload v-model="form.systemIcon" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" /> -->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button"
                       @click="
                      modalPicTap(
                        'dan',
                        'loginBackgroundImgTwo',
                        '登录内部背景图”'
                      )
                    ">
                    <div>
                      <div tabindex="0"
                           class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item"
                             style="margin: 0 0 0 0"
                             v-if="form.loginBackgroundImgTwo">
                          <div class="el-image">
                            <img :src="form.loginBackgroundImgTwo"
                                 width="100%"
                                 height="100%"
                                 class="el-image__inner"
                                 style="object-fit: cover" />
                          </div>
                          <div class="ele-image-upload-close"
                               @click="handleRemove('loginBackgroundImgTwo')"><i class="el-icon-close"></i></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never"
                 header="客服配置"
                 body-style="padding: 22px 22px 0 22px;">
          <el-row :gutter="15">
            <el-col :lg="8"
                    :md="10">
              <el-form-item label="客服二维码:"
                            prop="serviceQrCode">
                <span slot="label">
                  客服二维码
                  <el-tooltip placement="top">
                    <div slot="content">
                      客服二维码<br />
                      大小尺寸为100px * 100px
                    </div>
                    <i class="el-icon-question" />
                  </el-tooltip>
                </span>
                <!--<ele-image-upload v-model="form.serviceQrCode" :limit="1" :drag="true" :multiple="false"  @upload="onUpload" />-->
                <div class="ele-image-upload-list">
                  <div class="ele-image-upload-item ele-image-upload-button"
                       @click="
                      modalPicTap('dan', 'customerServiceQrCode', '客服二维码')
                    ">
                    <div>
                      <div tabindex="0"
                           class="el-upload el-upload--text">
                        <div class="el-upload-dragger">
                          <i class="el-icon-plus ele-image-upload-icon"></i>
                        </div>

                        <div class="ele-image-upload-item"
                             style="margin: 0 0 0 0"
                             v-if="form.customerServiceQrCode">
                          <div class="el-image">
                            <img :src="form.customerServiceQrCode"
                                 width="100%"
                                 height="100%"
                                 class="el-image__inner"
                                 style="object-fit: cover" />
                          </div>
                          <div class="ele-image-upload-close"
                               @click="handleRemove('customerServiceQrCode')"><i class="el-icon-close"></i></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :lg="8"
                    :md="10">
              <el-form-item label="手机号"
                            prop="phone">
                <el-input maxlength="11"
                          v-model.trim="form.phone"
                          placeholder="请输入手机号"
                          clearable />
              </el-form-item>
            </el-col>
            <el-col :lg="8"
                    :md="10">
              <el-form-item label="平台电话"
                            prop="telephone">
                <el-input maxlength="11"
                          v-model.trim="form.telephone"
                          placeholder="请输入平台电话"
                          clearable />
              </el-form-item>
            </el-col>
            <el-col :lg="8"
                    :md="10">
              <el-form-item label="邮箱:"
                            prop="email">
                <el-input v-model.trim="form.email"
                          placeholder="请输入"
                          clearable>
                  <template v-slot:append>.com</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8"
                    :md="10">
              <el-form-item label="地址:"
                            prop="address">
                <el-input v-model.trim="form.address"
                          placeholder="请输入地址"
                          clearable />
              </el-form-item>
            </el-col>
            <el-col :lg="8"
                    :md="10">
              <el-form-item label="上班时间:"
                            prop="workingTime">
                <el-input v-model.trim="form.workingTime"
                          placeholder="请输入上班时间描述"
                          clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!--上传图片组件-->
        <uploadPictures ref="upload"
                        :isChoice="isChoice"
                        :visible.sync="modalPic"
                        @getPic="getPic"
                        :gridBtn="gridBtn"
                        :gridPic="gridPic"
                        :title="modalTitle"></uploadPictures>

        <!--
        <uploadPictures ref="upload"
                        :isChoice="isChoice"
                        :visible.sync="modalPic"
                        @getPic="getPic"
                        :gridBtn="gridBtn"
                        :gridPic="gridPic"
                        :title="modalTitle"></uploadPictures> -->

        <!-- 底部工具栏 -->
        <div class="ele-bottom-tool">
          <div v-if="validMsg"
               class="ele-text-danger">
            <i class="el-icon-circle-close"></i>
            <span>{{ validMsg }}</span>
          </div>
          <div class="ele-bottom-tool-actions">
            <el-button type="primary"
                       :loading="loading"
                       @click="submit">
              提交
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  platformConfigAdd,
  platformConfigDetail,
  platformSettingsModify
} from '@/api/platformSettings/index';
import uploadPictures from './components/uploadImg';
// import { save, query } from '@/api/agent/pointAllocation';
const DEFAULT_FORM = {
  // oemId: this.$store.state.user.info.oemId,
  // systemIcon: [],
  // site_name:'',
  // browserIcon:[],
  // site_copyright:'',
  // site_beian:'',
  // site_jingbeian:'',
  // loginBackground: [],
  // loginLeftIcon:[],
  // kf_date:'',
  // serviceQrCode:[],
  // kf_mailbox:'',
  // kf_phone:'',
  // kf_address:'',
};
import EleImageUpload from 'ele-admin/es/ele-image-upload';
import request from '@/utils/request';

export default {
  name: 'FormAdvanced',
  components: { uploadPictures },
  data () {
    return {
      // 复选框
      checkList: ['D音H5任务发布'],
      // 能力名称——能力选择——复选框
      checkSelList: [],
      modalTitle: '',
      modalPic: false,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12
      },
      // 表单提交状态
      loading: false,
      // 表单数据
      form: {
        // 浏览器图标
        browserLogo: '',
        // 系统图标
        sysLogo: '',
        // 备案号
        recordNumber: '',
        // 京公网备案号
        publicNetworkRecordNumber: '',
        // 版权信息
        copyrightInfo: '',
        // 登录外部背景图
        loginBackgroundImg: '',
        // 登录内部背景图
        loginBackgroundImgTwo: '',
        //登录左侧图标
        loginLeftLogo: '',
        //客服二维码
        customerServiceQrCode: '',
        // 手机号
        phone: '',
        // 邮箱
        email: '',
        // 地址
        address: '',
        // 平台电话
        telephone: '',
        // 上班时间
        workingTime: '',
        // 版本号
        // versionNumber: '',
        //  appid
        appid: '',
        // 系统名字
        sysName: '',
        //  用户id
        // userId: '',
        wechat: '',
        // 域名
        realmName: window.location.host
      },
      isUpdata: false,
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入仓库名',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: '请输入仓库域名',
            trigger: 'blur'
          }
        ],
        datetime: [
          {
            required: true,
            message: '请选择生效日期',
            trigger: 'blur'
          }
        ],
        administrator: [
          {
            required: true,
            message: '请选择仓库管理员',
            trigger: 'blur'
          }
        ],
        approver: [
          {
            required: true,
            message: '请选择审批人',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择仓库类型',
            trigger: 'blur'
          }
        ],
        task: [
          {
            required: true,
            message: '请输入任务名',
            trigger: 'blur'
          }
        ],
        description: [
          {
            required: true,
            message: '请输入任务表述',
            trigger: 'blur'
          }
        ],
        executor: [
          {
            required: true,
            message: '请选择执行人',
            trigger: 'blur'
          }
        ],
        officer: [
          {
            required: true,
            message: '请选择责任人',
            trigger: 'blur'
          }
        ],
        reminder: [
          {
            required: true,
            message: '请选择提醒时间',
            trigger: 'blur'
          }
        ],
        taskType: [
          {
            required: true,
            message: '请选择任务类型',
            trigger: 'blur'
          }
        ]
      },
      // 表单验证信息
      validMsg: '',
      checkAll: [],
      checkSelAll: []
    };
  },
  mounted () {
    this.querys();
  },
  methods: {
    querys () {
      // 查询回显
      platformConfigDetail()
        .then((msg) => {
          console.log(msg);
          if (msg) {
            //   是修改
            this.$util.assignObject(this.form, {
              ...msg
            });
            this.form.id = msg.id;
            this.isUpdata = true;
          } else {
            // 修改
            this.isUpdata = false;
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    checkClick (e) {
      console.log('e=====', e);
      this.checkAll = e;
    },
    checkSelClick (e) {
      console.log('e=====', e);
      this.checkSelAll = e;
    },
    // 选择图片
    modalPicTap (tit, picTit, openTitle) {
      this.modalTitle = openTitle;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit;
      this.modalPic = true;
      this.$nextTick(() => {
        this.$refs['upload'].show();
      });
    },
    // 选中图片
    getPic (pc) {
      console.log('pc========', pc);
      switch (this.picTit) {
        case 'browserLogo':
          this.form.browserLogo = pc.imgUrl;
          break;
        case 'sysLogo':
          this.form.sysLogo = pc.imgUrl;
          break;
        case 'loginBackgroundImg':
          this.form.loginBackgroundImg = pc.imgUrl;
          break;
        case 'loginLeftLogo':
          this.form.loginLeftLogo = pc.imgUrl;
          break;
        case 'loginBackgroundImgTwo':
          this.form.loginBackgroundImgTwo = pc.imgUrl;
          break;

        case 'customerServiceQrCode':
          this.form.customerServiceQrCode = pc.imgUrl;
          break;
      }
      this.modalPic = false;
    },
    //删除图片
    handleRemove (field) {
      this.form[field] = '';
    },
    /* 表单提交 */
    submit () {
      this.$refs['form'].validate((valid, obj) => {
        if (valid) {
          // 手机号验证
          if (
            this.form.phone &&
            this.$sun.checkModbile(this.form.phone) == false
          ) {
            this.$message.error('手机号码格式不正确！');
            return;
          }
          // 邮箱验证
          if (
            this.form.email &&
            this.$sun.checkEmail(this.form.email + '.com') == false
          ) {
            this.$message.error('邮箱格式不正确！');
            return;
          }

          this.validMsg = '';
          this.loading = true;

          const data = {
            ...this.form
          };
          //   console.log(window.location.host);
          //   data.realmName = 'yjykmaster.admin168.net';
          data.realmName = window.location.host;

          console.log(data.realmName);
          const saveOrUpdate = this.isUpdata
            ? platformSettingsModify
            : platformConfigAdd;
          saveOrUpdate(data)
            .then((msg) => {
              this.loading = false;
              // id 不存在则调用查询是否已保存，否则保存多次都会不传id
              // if(!this.form.id){

              this.querys();
              // }
              this.$message.success('提交成功！');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
          return false;
        }
      });
    },
    onUpload (item) {
      console.log('item:', item);
      item.status = 'uploading';
      const formData = new FormData();
      formData.append('file', item.file);
      request({
        url: '/common/uploadFile',
        method: 'post',
        data: formData,
        onUploadProgress: (e) => {
          // 文件上传进度回调
          if (e.lengthComputable) {
            item.progress = (e.loaded / e.total) * 100;
          }
        }
      })
        .then((res) => {
          if (res.data.code === 0) {
            item.status = 'done';
            item.url = res.data.data.url;
            // 如果你上传的不是图片格式, 建议将 url 字段作为缩略图, 再添加其它字段作为最后提交数据
            //item.url = res.data.data.thumbnail;  // 也可以不赋值 url 字段, 默认会显示为一个文件图标
            item.fileUrl = res.data.data.url;
          }
        })
        .catch((e) => {
          item.status = 'exception';
        });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.ele-bottom-tool-actions {
  text-align: center;
}
</style>
